<script setup lang="ts">
import {ref} from "vue";
import type {PackageQuery,PackageDto} from "@/apis/taocan/taocan";
import type {Reactive, Ref} from "vue-demi";
import type {img} from "@/components/ImgUpload/index.vue";
import {deletePackage, getPackageById, getPackageList} from "@/apis/taocan/taocan";
import TaocanFormData from "@/views/taocan/view/TaocanFormData.vue";
import {getPackageTypeById} from "@/apis/taocan/taocanType";
import {Notification} from "@arco-design/web-vue";


const title = ref('')
const src:Ref<string[]> = ref([])
const url = import.meta.env.VITE_API_BASE_URL;
/**
 * add
 * up
 * */
const api = ref('')
const selectList = ref([])
const data:Ref<PackageDto[]> = ref([])
const visible = ref(false);


/**
 * 套餐图片列表
 */
const packageImg:Ref<img[]> = ref([])

/**
 * 获得套餐列表
 * */

const getList = () => {
  getPackageList(packageQuery).then(res => {
    console.log(res)
    data.value = res.data["data"].records
    //@ts-ignore
    packageQuery.total = res.data.data.total
  })
}

/**
 * 类型查询
 * */
const packageQuery:Reactive<PackageQuery> = reactive({
  id: 0,
  typeId:0,
  typeName: '',
  name:'',
  price: null,
  lable: null,
  service: '',
  goods:'',
  trip:'',
  description: '',
  status: null,
  pageNum: 1,
  pageSize: 10,
  total: 0
})


/**
 * 套餐类
 * */

const packageDto:Reactive<PackageDto> = reactive({
  id: 0,
  ossIds: '',
  packageTypeId: 0,
  packageTypeName: '',
  packageName: '',
  packagePrice: 0,
  packageLable: '',
  packageService: '',
  packageGoods: '',
  packageTrip: '',
  packageDescription: '',
  updateBy: 1,
  updateTime: '',
  status: null,
})

/**
 * 清空Dto数据
 * */
const clearDto = () => {
  packageDto.id = 0
  packageDto.ossIds = ''
  packageDto.packageTypeId = 0
  packageDto.packageTypeName = ''
  packageDto.packageName = ''
  packageDto.packagePrice = 0
  packageDto.packageLable = ''
  packageDto.packageService = ''
  packageDto.packageGoods = ''
  packageDto.packageTrip = ''
  packageDto.packageDescription = ''
  packageDto.updateBy = ''
}

const scrollbar = ref(true);
const scroll = {
  x: 1200,
  y: 650
};



/**
 * 新增按钮
 * */
const handleClick = () => {
  clearDto()
  api.value = 'add'
  title.value = '新增套餐'
  visible.value = true;
};

/**
 * 修改按钮
 * */
const updataClick = (data:any) => {
  console.log(data)
  if (data.id != null) {
    up(data.id)

    for (let i = 0; i < data.file.length;i++){
      packageImg.value.push({
        id:data.file[i].ossId,
        src:url + data.file[i].clientUrl,
        isNow:false

      })
    }
    console.log(packageImg.value)


  }else {
    up(null)
  }
  api.value = 'up'
  title.value = '修改套餐'
  visible.value = true;
};

/**
 * 修改时获得原数据
 * */
const up = async (id:any) => {

  let QueryId = null
  if (id != null) {
    QueryId = id
  } else {
    QueryId = selectList.value[0]
  }

  await new Promise((resolve) => {
    getPackageById(QueryId).then(res => {
      packageDto.id = res.data["data"].id
      packageDto.ossIds = res.data["data"].ossIds
      packageDto.packageTypeId = res.data["data"].packageTypeId
      packageDto.packageName = res.data["data"].packageName
      packageDto.packagePrice = res.data["data"].packagePrice
      packageDto.packageLable = res.data["data"].packageLable
      packageDto.packageService = res.data["data"].packageService
      packageDto.packageGoods = res.data["data"].packageGoods
      packageDto.packageTrip = res.data["data"].packageTrip
      packageDto.packageDescription = res.data["data"].packageDescription
      packageDto.updateBy = res.data["data"].updateBy
      packageDto.status = res.data["data"].status

      getPackageTypeById(res.data["data"].packageTypeId).then(res => {
        packageDto.packageTypeName = res.data["data"].packageTypeName
        resolve(res)
      })
    })
  })

}


/**
 * 删除按钮
 * */

const deleteClick = (data:any) => {
  if (data != null) {

    deletePackage([data.id]).then(res => {
      Notification.success({
        title: '删除成功',
        content: 'delete success!',
        duration: 3000,
      })
    })
    getList()

  }else {
    deletePackage(selectList.value).then(res => {
      Notification.success({
        title: '删除成功',
        content: 'delete success!',
        duration: 3000,
      })
    })
  }
  getList()
}

getList()
</script>

<template>
  <div class="main">
    <a-space direction="vertical" :size="16" class="grid">

      <a-row justify="start">
        <a-col :span="2" ><a-input v-model="packageQuery.name" placeholder="套餐名称"  /></a-col>
        <a-col :span="2" class="row"><a-input v-model="packageQuery.typeName" placeholder="类型名称" /></a-col>
        <a-col :span="2" class="row"><a-input v-model="packageQuery.lable" placeholder="套餐标签" /></a-col>
        <a-col :span="2" class="row">
          <a-select v-model="packageQuery.status" placeholder="请选择状态" allow-clear>
            <a-option :value="1">上架</a-option>
            <a-option :value="0">下架</a-option>
          </a-select>
        </a-col>
        <a-col :span="1" class="row"><a-button type="outline" @click="getList" >查询</a-button></a-col>
      </a-row>

      <a-row justify="start">
        <a-space>
          <a-col :span="1"><a-button type="primary" @click="handleClick" >新增</a-button></a-col>
          <a-col :span="1"><a-button type="outline" @click="deleteClick(null)" status="danger" :disabled="selectList.length == 0">删除</a-button></a-col>
        </a-space>
      </a-row>

      <a-table :data="data" row-key="id" :row-selection="selectList"
               :scroll="scroll" :scrollbar="scrollbar"
               v-model:selectedKeys="selectList" :pagination="false"
               style="background-color: white;">
        <template #columns>
          <a-table-column title="编号" data-index="id"></a-table-column>
          <a-table-column ellipsis="true" title="名称" data-index="packageName"></a-table-column>
          <a-table-column ellipsis="true" title="类型" data-index="packageTypeName"></a-table-column>
          <a-table-column title="价格" data-index="packagePrice"></a-table-column>
          <a-table-column ellipsis="true" title="标签" data-index="packageLable"></a-table-column>
          <a-table-column title="状态" data-index="status">
            <template #cell="{record}">
              <a-tag v-if="record.status == 1" color="green">上架</a-tag>
              <a-tag v-if="record.status == 0" color="red">下架</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="上传者" data-index="updateBy"></a-table-column>
          <a-table-column title="上传时间" data-index="updateTime"></a-table-column>
          <a-table-column title="操作">
            <template #cell="{record}">
              <a-button type="text" @click="updataClick(record)">修改</a-button>
              <a-button type="text" @click="deleteClick(record)" status="danger">删除</a-button>
            </template>
          </a-table-column>
        </template>

        <template #footer>
          <a-pagination v-model:current="packageQuery.pageNum" :total="packageQuery.total"
                        v-model:page-size="packageQuery.pageSize" @page-size-change="getList"
                        @change="getList"
                        show-total show-jumper show-page-size/>
        </template>
      </a-table>
    </a-space>

    <taocan-form-data v-model:visible="visible"
                      v-model:title="title"
                      v-model:api="api"
                      v-model:dto="packageDto"
                      v-model:img="packageImg"
                      v-model:src="src"
                      @ok="getList"
    ></taocan-form-data>
  </div>



</template>





<style lang="scss" scoped>
.group {
  .img {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;
  }
  display: flex;
}
.grid {
  .row {
    margin: 0 10px;
  }
  margin: 10px;
  padding: 10px;
  background-color: white;
}
</style>